import React, { Component } from "react";
import { StyleSheet } from "react-native";
import Picker from "react-native-picker";
import Modal from "react-native-modalbox";

/**
 * 订单类型（因为直接使用，点击页面其他控件没有关闭）
 */
export default class PickerTypeDialog extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      pickerData:[],
      dateType:0,
    };
  }

  show = (dateType,pickerData) => {
    this.setState({ isOpen: true,pickerData,dateType });
  };

  dismiss = () => {
    logger("关闭对话框");
    Picker.hide();
    this.setState({ isOpen: false });
  };

  render() {
    const { isOpen,pickerData, dateType} = this.state;
    let selectedValue = [pickerData[dateType]];
    return (
      <Modal
        style={styles.modal}
        coverScreen={true}
        isOpen={isOpen}
        onClosed={this.dismiss}
        onOpened={()=>{
          Picker.init({
            pickerData,
            selectedValue,
            pickerConfirmBtnText: "确定",
            pickerCancelBtnText: "取消",
            pickerTitleText: "请选择",
            pickerConfirmBtnColor: [53, 200, 119, 1],
            pickerFontColor: [53, 200, 119, 1],
            pickerTitleColor: [51, 51, 51, 1],
            pickerToolBarBg: [235, 235, 235, 1],
            pickerBg: [255, 255, 255, 1],
            pickerCancelBtnColor: [102, 102, 102, 1],
            pickerTextEllipsisLen: 20,
            onPickerConfirm: data => {
              logger("选择内容", data);
              let status = pickerData.findIndex(item => item == data[0]);
              this.props.onChecked && this.props.onChecked(status, data);
              this.setState({ isOpen: false });
            },
            onPickerCancel: () => {
              this.setState({ isOpen: false });
            },
          });
          Picker.show();
        }} >
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
});


